<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="apple-touch-icon" sizes="76x76"
	href="../assets/img/apple-icon.png">
<link rel="icon" type="image/png" href="../assets/img/favicon.png">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>Get Shit Done Bootstrap Wizard by Creative Tim</title>

<meta
	content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'
	name='viewport' />
<meta name="viewport" content="width=device-width" />

<!--     Fonts and icons     -->
<link
	href="http://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.css"
	rel="stylesheet">

<!-- CSS Files -->
<link href="../assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="../assets/css/gsdk-bootstrap-wizard.css" rel="stylesheet" />

<!-- CSS Just for demo purpose, don't include it in your project -->
<link href="../assets/css/demo.css" rel="stylesheet" />

<script type="text/javascript" src="../jquery/jquery.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		$("#finish").click(function() {
			 $("#admin_reg_form").submit();  
			 /* alert("reg.action");  */
		});
	});
</script>


</head>
<body>
	<div class="image-container set-full-height"
		style="background-image: url('../assets/img/wizard-boat.jpg')">
		<!--   Creative Tim Branding   -->
		<a href="#">
			<div class="logo-container">
				<div class="logo">
					<img src="../assets/img/new_logo.png">
				</div>
				<div class="brand">Creative Tim</div>
			</div>
		</a>

		<!--   Big container   -->
		<div class="container">
			<div class="row">
				<div class="col-sm-8 col-sm-offset-2">

					<!--      Wizard container        -->
					<div class="wizard-container">
						<div class="card wizard-card" data-color="azzure" id="wizard">
							<form id="admin_reg_form" action="reg.action" method="post">
								<!--        You can switch ' data-color="azzure" '  with one of the next bright colors: "blue", "green", "orange", "red"          -->

								<div class="wizard-header">
									<h3>
										<b>借书系统</b><br> <small>Welcome!</small>
									</h3>
								</div>
								<div class="wizard-navigation">
									<ul>
										<li><a href="#details" data-toggle="tab">注册</a></li>
									</ul>
								</div>
								<div class="tab-content">
									<div class="tab-pane" id="details">
										<div class="row">
											<div class="col-sm-12">
												<h4 class="info-text">填写您的基本信息</h4>
											</div>
											<div class="col-sm-5 col-sm-offset-1">
												<div class="form-group">
													<label>工号</label> <input type="text" class="form-control"
														name="id" id="exampleInputEmail1" placeholder="...">
												</div>
											</div>
											<div class="col-sm-5">
												<div class="form-group">
													<label>姓名</label> <input type="text" class="form-control"
														name="name" id="exampleInputEmail2" placeholder="...">
												</div>
											</div>
											<div class="col-sm-5 col-sm-offset-1">
												<div class="form-group">
													<label>登录密码</label> <input type="text" class="form-control"
														name="password" id="exampleInputEmail3" placeholder="...">

													<label>确认密码</label> <input type="text" class="form-control"
														id="exampleInputEmail4" placeholder="...">

												</div>
											</div>
											<div class="col-sm-5">
												<div class="form-group">
													<label>电话号码</label> <input type="text" name="phonenumber"
														class="form-control" placeholder="...">
												</div>
											</div>
										</div>
									</div>




									<div class="wizard-footer">
										<div class="pull-right">
											<input type='button'
												class='btn btn-finish btn-fill btn-info btn-wd btn-sm'
												name='finish' id='finish' value='注册' /> <input
												type='button'
												class='btn btn-finish btn-fill btn-info btn-wd btn-sm'
												name='back' id='back' value='返回' />
										</div>
										<div class="pull-left">
											<input type='button'
												class='btn btn-previous btn-fill btn-default btn-wd btn-sm'
												name='previous' value='Previous' />
										</div>
										<div class="clearfix"></div>
									</div>


									<script>
								function get(e) {
									return document.getElementById(e);
								}
								    get('back').onclick=function(){
									window.location.href= '/jsxt/user/admintologin.action';
								}
									get('exampleInputEmail4').onblur = function() {
										var npassword = get('exampleInputEmail3').value;
										var fpassword = get('exampleInputEmail4').value;
										if (npassword != fpassword) {
											alert('两个密码不匹配');
										}
									}
									get('exampleInputEmail3').onblur = function() {
										var npassword = get('exampleInputEmail3').value.length;
										if (npassword<6&&npassword>0) {
											alert('密码长度过短');
										}
									}
									
							</script>
							</form>
						</div>
					</div>
					<!-- wizard container -->
				</div>
			</div>
			<!-- row -->
		</div>
		<!--  big container -->

		<div class="footer">
			<div class="container">
				made with <i class="fa fa-heart heart"></i> by <a href="#">Group
					12</a>
			</div>
		</div>


	</div>

</body>

<!--   Core JS Files   -->
<script src="../assets/js/jquery-2.2.4.min.js" type="text/javascript"></script>
<script src="../assets/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../assets/js/jquery.bootstrap.wizard.js"
	type="text/javascript"></script>

<!--  Plugin for the Wizard -->
<script src="../assets/js/gsdk-bootstrap-wizard.js"></script>

<!--  More information about jquery.validate here: http://jqueryvalidation.org/	 -->
<script src="../assets/js/jquery.validate.min.js"></script>

</html>
